<template>
  <div class="">
    <div class="tel">
        <img :src="menu.img" alt="" style="width:100px;" />
        <div>
            <h3>{{menu.title}}</h3>
            <p>{{menu.description}}</p>
        </div>
    </div>
    <div v-for="item in menu.data" :key="item._id" class="tit">
        <h1 @click="router.push({path:'/detail',query:{id:item._id}})">{{item.title}}</h1>
        <div class="title">
            <img :src="item.image.url" @error="moveerrorimg" v-if="item.image" class="titleimg"  />
        
            {{item.excerpt}}
        </div>
    </div>
   <div class="btn">
     <el-button type="primary" @click="addHandler" v-show="flag">加载更多</el-button>
   </div>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs } from "vue";
import { useStore } from "vuex";
import { useRouter, useRoute } from "vue-router";
import {getList,mylists}from "../utils/api"
const router=useRouter()
const route=useRoute()
const flag=ref(true)
const menu=reactive({
    data:[],
    img:'',
    title: "",
    description:''
})
const dataList=reactive({
   id: route.query.id,
    page:"1",
    size:"5"
})

const addHandler=()=>{
   dataList.page++
   if (dataList.size==menu.data.length){
    flag.value=false
   }
   getList(dataList).then((res)=>{
    console.log(res);
    menu.data.push(...res.data.data.list)
    dataList.page=res.data.data.currentPage
    dataList.size=res.data.data.pageSize
})
}


getList(dataList).then((res)=>{
    console.log(res);
    menu.data.push(...res.data.data.list)
    dataList.page=res.data.data.currentPage
    dataList.size=res.data.data.pageSize
})
mylists(dataList.id).then((res)=>{
    console.log(res);
    menu.img=res.data.data.avatar.url,
    menu.title=res.data.data.title,
    menu.description=res.data.data.description

})
</script>

<style lang="scss">
.tit{
    width: 80%;
    height: 100px;
    background: #fff;
    box-shadow: 0px 0px 5px 1px #ccc;
    margin: 10px auto;
}
.title{
    display: flex;
    justify-content: space-around;
}
.titleimg{
    width: 70px;
    height: 70px;
    border-radius: 50%;
}
.tel{
    display: flex;
    width: 80%;
    margin: auto;
}
.btn{
    width: 80%;
    margin: auto;
}
</style>
